﻿@page "/component/input/selectlist"

<Pager DataSource="@(new List<string>(new[] { 
                         "Demo","Item Format","Up Direction","Two-way Binding","Default Item","Form Validation",
                         "Removable","Selectable","Inline","Disabled","Read Only","Size","Compact","Inverted","Span","Filterable","Max Items","Local Filter","Empty Content","Remote Data"
                     }))">
    <Body>
        <Header1 Divider>
            SelectList
            <SubHeader>
                A dropdown allows a user to select a value from a series of options
            </SubHeader>
        </Header1>
        <Segment>
            Data Source for demo:
        @Code.GetCode(@"
```csharp
class User
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Avatar { get; set; }

    public override string ToString() => Name;
}

User SelectUser { get; set; } = new();

IReadOnlyList<User> Users => new List<User>
{
    new User{ Id = 1, Name = ""Zoe"" , Avatar=""zoe.jpg"" },
    new User{ Id = 2, Name = ""Stevie"" , Avatar=""stevie.jpg"" },
    new User{ Id = 3, Name = ""Jenny"" , Avatar=""jenny.jpg"" },
    new User{ Id = 4, Name = ""Christian"" , Avatar=""christian.jpg"" },
    new User{ Id = 5, Name = ""Ade"" , Avatar=""ade.jpg"" },
    new User{ Id = 6, Name = ""Veronika"" , Avatar=""veronika.jpg"" },
    new User{ Id = 7, Name = ""Nan"" , Avatar=""nan.jpg"" },
    new User{ Id = 8, Name = ""Elliot"" , Avatar=""elliot.jpg"" }
};
```
")
        </Segment>

        <PresentationPart Title="Sample">
            <Description>
                <code>ValueField</code> is required, and should be the field name of data source.
            </Description>
            <RunTemplate>
                <SelectList @bind-Value="SelectUser.Id" DataSource="Users" ValueField="@nameof(User.Id)"/>
                <p>
                    Selected Id:@SelectUser.Id
                </p>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<SelectList bind-Value=""SelectUser.Id"" DataSource=""Users"" ValueField=""@nameof(User.Id)""/>
```
")
            </CodeTemplate>
        </PresentationPart>
         <PresentationPart Title="Item Format">
            <Description>
                Customize the format of dropdown items.
            </Description>
            <RunTemplate>
                <SelectList @bind-Value="SelectUser.Id" DataSource="Users" ValueField="@nameof(User.Id)">
                    <ItemFormatContent>
                        <Avatar Src="@context.Avatar" />
                        @context.Name
                    </ItemFormatContent>
                </SelectList>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<SelectList bind-Value=""SelectUser.Id"" DataSource=""Users"" ValueField=""@nameof(User.Id)"">
    <ItemFormatContent>
        <Avatar Src=""context.Avatar"" />
        @context.Name
    </ItemFormatContent>
</SelectList>
```
")
            </CodeTemplate>
        </PresentationPart>
       <PresentationPart Title="Up Direction">
            <Description>
                A dropdown menu will automatically change which direction it opens if it can't fit on screen. If you need a dropdown to open in a specific direction you can specify it when initializing a dropdown.
            </Description>
            <RunTemplate>
                <SelectList @bind-Value="SelectUser.Id" DataSource="Users" Up  ValueField="@nameof(User.Id)"/>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<SelectList bind-Value=""SelectUser.Id"" DataSource=""Users"" Up ValueField=""@nameof(User.Id)""/>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Default Item">
            <Description>Customize first item in dropdown list</Description>
            <RunTemplate>
                <SelectList @bind-Value="SelectUserName" DataSource="Users" Context="dropdown" ValueField="@nameof(User.Name)">
                    <ItemFormatContent>
                        <Avatar Src="@dropdown.Avatar" />
                        @dropdown.Name
                    </ItemFormatContent>
                    <DefaultItemContent>
                        --Choose Item--
                    </DefaultItemContent>
                </SelectList>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<SelectList bind-Value=""SelectUserName"" DataSource=""Users"" Context=""dropdown"" ValueField=""@nameof(User.Name)"">
    <ItemFormatContent>
        <Avatar Src=""@dropdown.Avatar"" />
        @dropdown.Name
    </ItemFormatContent>
    <DefaultItemContent>
        --Choose Item--
    </DefaultItemContent>
</SelectList>
```
")
            </CodeTemplate>
        </PresentationPart>
        
        <PresentationPart Title="Form Validation">
            <RunTemplate>
                <Form Model="this">
                    <DataAnnotationsValidator />
                    <Field For="()=>FormSelectName">
                        <SelectList DataSource="Users" @bind-Value="FormSelectName" Removable ValueField="@nameof(User.Name)">
                            <DefaultItemContent>-Choose-</DefaultItemContent>
                        </SelectList>
                    </Field>
                    <Field>
                        Select Name:@FormSelectName
                    </Field>
                    <Button>Submit</Button>
                </Form>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<Form Model=""this"">
    <DataAnnotationsValidator/>
    <Field For=""()=>SelectName"">
        <SelectList DataSource=""Users"" bind-Value=""FormSelectName"" Removable ValueField=""@nameof(User.Name)"">
            <DefaultItemContent>-Choose-</DefaultItemContent>
        </SelectList>
    </Field>
    <Button>Submit</Button>
</Form>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Removable">
            <Description>
                A removable selection dropdown can allow a user to cancel to cancel a previous selection
            </Description>
            <RunTemplate>
                <SelectList @bind-Value="SelectName" DataSource="Users" Removable  ValueField="@nameof(User.Name)">
                    <DefaultItemContent>
                        -Selection-
                    </DefaultItemContent>
                </SelectList>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<SelectList bind-Value=""SelectName""  DataSource=""Users"" Removable>
    <DefaultItemContent>
        -Selection-
    </DefaultItemContent>
</SelectList>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Selectable">
            <Description>
                Set <code>Selectable="false"</code> to remove the border.
            </Description>
            <RunTemplate>
                <SelectList DataSource="Users" Selectable="false" @bind-Value="SelectName"  ValueField="@nameof(User.Name)"/>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<SelectList DataSource=""Users"" Selectable=""false"" />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Inline">
            <Description>
                A dropdown can be formatted to appear inline in other content
            </Description>
            <RunTemplate>
                <Segment>
                    Show me posts by
                    <SelectList DataSource="Users" Selectable="false" @bind-Value="SelectName" Inline ValueField="@nameof(User.Name)">
                        <ItemFormatContent>
                            <Avatar Src="@context.Avatar" />
                            @context.Name
                        </ItemFormatContent>
                    </SelectList>                    
                </Segment>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment>
    Show me posts by
    <SelectList DataSource=""Users"" Selectable=""false"" Inline>
        <ItemFormatContent>
            <Avatar Src=""@context.Avatar"" />
            @context.Name
        </ItemFormatContent>
    </SelectList>
</Segment>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Disabled">
            <Description>
                A disabled dropdown menu or item does not allow user interaction
            </Description>
            <RunTemplate>
                <SelectList DataSource="Users" Disabled @bind-Value="SelectName" ValueField="@nameof(User.Name)"/>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<SelectList DataSource=""Users"" Disabled />
```
")
            </CodeTemplate>
        </PresentationPart>
                <PresentationPart Title="Read Only">
            <Description>
                A dropdown can be read-only and does not allow user interaction
            </Description>
            <RunTemplate>
                <SelectList DataSource="Users" ReadOnly @bind-Value="SelectName" ValueField="@nameof(User.Name)"/>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<SelectList DataSource=""Users"" ReadOnly />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Size">
            <RunTemplate>
                <SelectList DataSource="Users" Size="Size.Mini" @bind-Value="SelectName" ValueField="@nameof(User.Name)"><DefaultItemContent>Mini</DefaultItemContent></SelectList>
                <SelectList DataSource="Users" Size="Size.Tiny" @bind-Value="SelectName" ValueField="@nameof(User.Name)"><DefaultItemContent>Tiny</DefaultItemContent></SelectList>
                <SelectList DataSource="Users" Size="Size.Small" @bind-Value="SelectName" ValueField="@nameof(User.Name)"><DefaultItemContent>Small</DefaultItemContent></SelectList>
                <SelectList DataSource="Users" Size="Size.Medium" @bind-Value="SelectName" ValueField="@nameof(User.Name)"><DefaultItemContent>Medium</DefaultItemContent></SelectList>
                <SelectList DataSource="Users" Size="Size.Large" @bind-Value="SelectName" ValueField="@nameof(User.Name)"><DefaultItemContent>Large</DefaultItemContent></SelectList>
                <SelectList DataSource="Users" Size="Size.Big" @bind-Value="SelectName" ValueField="@nameof(User.Name)"><DefaultItemContent>Big</DefaultItemContent></SelectList>
                <SelectList DataSource="Users" Size="Size.Huge" @bind-Value="SelectName" ValueField="@nameof(User.Name)"><DefaultItemContent>Huge</DefaultItemContent></SelectList>
                <SelectList DataSource="Users" Size="Size.Massive" @bind-Value="SelectName" ValueField="@nameof(User.Name)"><DefaultItemContent>Massive</DefaultItemContent></SelectList>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<SelectList DataSource=""Users"" Size=""Size.Mini"" ><DefaultItemContent>Mini</DefaultItemContent></SelectList>
<SelectList DataSource=""Users"" Size=""Size.Tiny"" ><DefaultItemContent>Tiny</DefaultItemContent></SelectList>
<SelectList DataSource=""Users"" Size=""Size.Small"" ><DefaultItemContent>Small</DefaultItemContent></SelectList>
<SelectList DataSource=""Users"" Size=""Size.Medium"" ><DefaultItemContent>Medium</DefaultItemContent></SelectList>
<SelectList DataSource=""Users"" Size=""Size.Large""><DefaultItemContent>Large</DefaultItemContent></SelectList>
<SelectList DataSource=""Users"" Size=""Size.Big""><DefaultItemContent>Big</DefaultItemContent></SelectList>
<SelectList DataSource=""Users"" Size=""Size.Huge""><DefaultItemContent>Huge</DefaultItemContent></SelectList>
<SelectList DataSource=""Users"" Size=""Size.Massive"" ><DefaultItemContent>Massive</DefaultItemContent></SelectList>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Compact">
            <Description>
                A compact dropdown has no minimum width
            </Description>
            <RunTemplate>
                <SelectList DataSource="Users" Compact  @bind-Value="SelectName" ValueField="@nameof(User.Name)"/>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<SelectList DataSource=""Users"" Compact/>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Inverted">
            <Description>
                A dropdown can be inverted
            </Description>
            <RunTemplate>
                <Segment Inverted>
                    <SelectList DataSource="Users" Inverted  @bind-Value="SelectName" ValueField="@nameof(User.Name)"/>
                </Segment>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<Segment Inverted>
    <SelectList DataSource=""Users"" Inverted />
</Segment>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Span">
            <Description>
                A selection dropdown can allow menu to be equally divided so that more items can be glanced.
            </Description>
            <RunTemplate>
                <SelectList DataSource="Users" Span="SpanSize.Is2" @bind-Value="SelectName" ValueField="@nameof(User.Name)">
                    <DefaultItemContent>
                        Two Columns
                    </DefaultItemContent>
                </SelectList>
                <SelectList DataSource="Users" Span="SpanSize.Is3" Fluid @bind-Value="SelectName" ValueField="@nameof(User.Name)">
                    <DefaultItemContent>
                        Three Columns
                    </DefaultItemContent>
                </SelectList>
                <SelectList DataSource="Users" Span="SpanSize.Is4" Fluid @bind-Value="SelectName" ValueField="@nameof(User.Name)">
                    <DefaultItemContent>
                        Four Columns
                    </DefaultItemContent>
                </SelectList>
                <SelectList DataSource="Users" Span="SpanSize.Is5" Fluid @bind-Value="SelectName" ValueField="@nameof(User.Name)">
                    <DefaultItemContent>
                        Five Columns
                    </DefaultItemContent>
                </SelectList>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<Form Model=""this"">
    <Field>
        <SelectList DataSource=""Users"" Span=""SpanSize.Is2"">
            <DefaultItemContent>
                Two Columns
            </DefaultItemContent>
        </SelectList>
    </Field>
    <Field>
        <SelectList DataSource=""Users"" Span=""SpanSize.Is3"">
            <DefaultItemContent>
                Three Columns
            </DefaultItemContent>
        </SelectList>
    </Field>
    <Field>
        <SelectList DataSource=""Users"" Span=""SpanSize.Is4"">
            <DefaultItemContent>
                Four Columns
            </DefaultItemContent>
        </SelectList>
    </Field>
    <Field>
        <SelectList DataSource=""Users"" Span=""SpanSize.Is5"">
            <DefaultItemContent>
                Five Columns
            </DefaultItemContent>
        </SelectList>
    </Field>
</Form>
```
")
            </CodeTemplate>
        </PresentationPart>


        
        <PresentationPart Title="Filterable">
            <Description>
                A dropdown can allow a user to search through a large list of choices.
                <Message State="State.Info">
                    The search input value is comes from <code>bind-Value</code> field.
                </Message>
            </Description>
            <RunTemplate>
                <SelectList DataSource="@(new List<string>
                                    {
                                        "China","USA","UK","France","German","South Africa","Bulgaria","Belgium","Russia","Belarus"
                                    })" Filterable @bind-Value="Country" ValueField="@nameof(Country)"/>

                <SelectList DataSource="Users" Filterable @bind-Value="SelectUser.Name" ValueField="@nameof(User.Name)"/>
            </RunTemplate>
            <CodeTemplate>
        @Code.GetCode(@"
```html
<SelectList DataSource=""@(new List<string>
                            {
                                ""China"",""USA"",""UK"",""France"",""German"",""South Africa"",""Bulgaria"",""Belgium"",""Russia"",""Belarus""
                            })"" Filterable bind-Value=""Country""/>

<SelectList DataSource=""Users"" Filterable bind-Value=""SelectUser.Name""/>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Max Items">
            <Description>
                The candicate items in dropdown list. Default is 10, only availible when <code>Filterable</code> is true.
            </Description>
    <RunTemplate>
        <SelectList DataSource="Users" MaxItems="5" Filterable  @bind-Value="SelectUser.Name" ValueField="@nameof(User.Name)"/>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<SelectList Filterable DataSource=""Users"" MaxItems=""5""  bind-Value=""SelectUser.Name""/>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Local Filter">
            <Description>
                A filter witch can customize how items can be searched in dropdown list from local data source.
                <List Bulleted>
                    <Item>arg1: the value from search input</Item>
                    <Item>arg2: the item of data source</Item>
                    <Item>return: a bool value represent data is found or not.</Item>
                </List>
            </Description>
    <RunTemplate>
        <SelectList @bind-Value="SelectUser.Name" DataSource="Users" ValueField="@nameof(User.Name)" LocalFilter="MyFilter" Filterable/>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<SelectList bind-Value=""SelectUser.Name"" DataSource=""Users"" LocalFilter=""MyFilter"" Filterable/>
```
```cs
bool MyFilter(string value, User item)
{
    return item.Name.ToLower().Contains(value);
}
```
")
    </CodeTemplate>
</PresentationPart>
                <PresentationPart Title="Empty Content">
                    <Description>
                        Customaize empty content while result is nothing
                    </Description>
                    <RunTemplate>
                        <SelectList DataSource="Users" MaxItems="5" Filterable  @bind-Value="SelectUser.Id"  ValueField="@nameof(User.Id)">
                            <EmptyContent>
                                I don't find anything.
                            </EmptyContent>
                        </SelectList>
                    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<SelectList DataSource=""Users"" MaxItems=""5"" Filterable bind-Value=""SelectUser.Name"">
    <EmptyContent>
        I don't find anything.
    </EmptyContent>
</SelectList>
```
")
    </CodeTemplate>
</PresentationPart>

        
<PresentationPart Title="Remote Data">
    <Description>Use <code>DataSourceHandler</code> to get remote data source and will be displayed the loading content before data loaded.</Description>
    <RunTemplate>
        <SelectList  @bind-Value="SelectUserName" DataSourceHandler="GetRemoteData" ValueField="@nameof(User.Name)"/>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<SelectList bind-Value=""SelectUserName"" DataSourceHandler=""GetRemoteData"" ValueField=""@nameof(User.Name)""/>
```

```cs
async Task<IEnumerable<User>> GetRemoteData(string input)//the search value
{
    //to do
}
```
")
    </CodeTemplate>
</PresentationPart>
    </Body>
</Pager>

@code{
    [Display(Name ="User")]
    [Required]
    string SelectUserName { get; set; }

    [Display(Name = "Name")]
    [Required]
    public string FormSelectName { get; set; }

    [Display(Name = "User")]
    [Required]
    public string SelectName { get; set; }

    User SelectUser { get; set; } = new();

    string Country{ get; set; }

    class User
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Avatar { get; set; }

        public override string ToString() => Name;
    }

    IReadOnlyList<User> Users => new List<User>
    {
        new User{ Id = 1, Name = "Zoe" , Avatar="/img/avatar/zoe.jpg" },
        new User{ Id = 2, Name = "Stevie" , Avatar="/img/avatar/stevie.jpg" },
        new User{ Id = 3, Name = "Jenny" , Avatar="/img/avatar/jenny.jpg" },
        new User{ Id = 4, Name = "Christian" , Avatar="/img/avatar/christian.jpg" },
        new User{ Id = 5, Name = "Ade" , Avatar="/img/avatar/ade.jpg" },
        new User{ Id = 6, Name = "Veronika" , Avatar="/img/avatar/veronika.jpg" },
        new User{ Id = 7, Name = "Nan" , Avatar="/img/avatar/nan.jpg" },
        new User{ Id = 8, Name = "Elliot" , Avatar="/img/avatar/elliot.jpg" }
    };


    async Task<IEnumerable<User>> GetRemoteData(string input)
    {
        await Task.Delay(5000);
        return Users;
    }

    bool MyFilter(string value, User item)
    {
        return item.Name.ToLower().Contains(value);
    }
}